<template>
	<view class="page-main">
		<view class="input-list top-info">
			<view class="user-title">手机号</view>
			<input class="user-name" type="number" maxlength="11" placeholder="请输入手机号码"
				placeholder-class="placeholder-info" v-model="form.phone" />
		</view>
		
		<view class="input-list top-message">
			<view class="user-title">验证码</view>
			<view class="user-right-mess">
				<input class="user-code" type="text" maxlength="6" placeholder="请输入短信验证码"
					placeholder-class="placeholder-info" v-model="form.verificationCode" />
				<view :class="isGetsms?'code-name-select':'code-name'" @click.stop="setSmsCode">{{verification_name}}
				</view>
			</view>
		</view>
		<view class="login-btn" @click="nextInfo">提交</view>
		<!-- <view class="login-btn" @click="nextInfo">提交</view> -->
		
		<view style="margin-top:100rpx;width: 600rpx;margin-left:75rpx;color:red;padding-bottom: 200rpx;">
			<text style="font-size: 32rpx;">
				温馨提示:如果手机号提示不正确，可输入预留房产证的另外一个手机号，如果还是不对，请联系管家进行修改。
			</text>
		</view>
	</view>
</template>

<script>
	import {getSmsCode,bindRoom} from "@/api/connect.js";
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				verification_name: '获取验证码',
				isGetsms: false,
				countdown: 60, //获取验证码倒计时
				form: {
					phone: '',
					verificationCode: '', //短信验证码
				},
				picUrl: '', //图形验证码图片地址
			}
		},
		
		methods: {
			//获取短信验证码
			setSmsCode() {
				if (!this.form.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}
				getSmsCode(this.form).then((res)=>{
					console.log('res',res)
					if(res.data.code==0){
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						this.setTime()
					}else{
						uni.showToast({
							icon: 'error',
							title: res.data.msg
						})
					}
				})
				// if (this.countdown == 60) {
				// 	this.setTime()
				// }
			},
			//验证码倒计时
			setTime() {
				if (this.countdown == 0) {
					this.isGetsms = false
					this.verification_name = '获取验证码'
					this.countdown = 60
					return
				} else {
					this.isGetsms = true
					this.verification_name = this.addZero(this.countdown) + '秒后重试'
					this.countdown--
				}
				setTimeout(res => {
					this.setTime()
				}, 1000)
			},
			addZero(num) {
				if (num < 10) {
					num = '0' + num;
				}
				return num;
			},
			//提交
			nextInfo() {
				
				if (!this.form.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}
				if (!this.form.verificationCode) {
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码'
					})
					return
				}
				bindRoom(this.form).then((res)=>{
					console.log("res",res);
					if(res.data.code==0){
						uni.showToast({
							icon: 'none',
							title: '房屋绑定成功'
						})
						storage.setAccessToken(res.data.accessToken);
						storage.setHasLogin(true);
						storage.setBindRoom(true)
						uni.navigateTo({
							url:`/pages/index/index`
						})
					}else{
						uni.showToast({
							icon: 'error',
							title: res.data.msg
						})	
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.page-main {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		display: inline-block;

		.title-name {
			margin-top: 64rpx;
			margin-left: 48rpx;
			font-size: 52rpx;
			color: #333333;
			line-height: 52rpx;
		}

		.top-info {
			margin: 0 auto;
			margin-top: 84rpx;
		}

		.top-message {
			margin: 0 auto;
			margin-top: 64rpx;
		}

		.input-list {
			width: 652rpx;
			border-bottom: solid #EFEFEF 1px;
			padding-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.user-title {
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
			}

			.user-name {
				width: 440rpx;
				margin-left: 80rpx;
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
			}

			.placeholder-info {
				font-size: 30rpx;
				color: #E1E1E1;
				line-height: 30rpx;
			}

			.user-right {
				width: 440rpx;
				margin-left: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-code {
					font-size: 30rpx;
					color: #333333;
					line-height: 30rpx;
				}

				.code-img {
					width: 143rpx;
					height: 60rpx;
					border: solid #EFEFEF 1px;
				}
			}

			.user-right-mess {
				width: 440rpx;
				margin-left: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-code {
					font-size: 30rpx;
					color: #333333;
					line-height: 30rpx;
				}

				.code-name {
					font-size: 30rpx;
					color: #0A4B9D;
					line-height: 30rpx;
					min-width: 180rpx;
					text-align: right;
				}

				.code-name-select {
					font-size: 30rpx;
					color: #C9C9C9;
					line-height: 30rpx;
					min-width: 180rpx;
					text-align: right;
				}
			}
		}

		.login-btn {
			width: 600rpx;
			height: 96rpx;
			background: #0A4B9D;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin: 0 auto;
			margin-top: 96rpx;
		}
	}
</style>
